<template>
  <header>
    <h1>设备管理系统</h1>
    <el-dropdown @command="onCommand">
      <div class="menu-link">{{name}}<i class="el-icon-arrow-down" /></div>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="password">修改密码</el-dropdown-item>
        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <el-dialog
      title="修改密码"
      width="500px"
      :visible.sync="show"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body>
      <div class="dialog-content">
        <el-input type="password" placeholder="旧密码" v-model="fromData.oldPw"></el-input>
        <el-input type="password" placeholder="新密码" v-model="fromData.newPw1"></el-input>
        <el-input type="password" placeholder="重复新密码" v-model="fromData.newPw2"></el-input>
      </div>
      <!-- 按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </header>
</template>
<script>
export default {
  props:['name'],
  data() {
    return{
      show:false,
      fromData:{//密码表单
        oldPw:"",
        newPw1:"",
        newPw2:""
      }
    }
  },
  methods: {
    // 下拉菜单
    onCommand(c) {
      // this是一个对象  调用方法
      this[c]();
    },
    // 退出登录
    logout() {
      // 调用接口
      this.axios.post("/logout").then(() => {
        //调用接口后跳转到登录页面
        this.$router.push("/login");
      });
    },
    // 修改密码
    password() {
      // 弹出框
      this.show = true
    },
    //表单验证
    submit(){
      const {oldPw,newPw1,newPw2} = this.fromData
      if(!oldPw){return this.$message.error('请填写旧密码')}
      if(!newPw1){return this.$message.error('请输入新密码')}
      if(newPw1!==newPw2){return this.$message.error('两次新密码必须一致')}
      this.axios.post('/password-reset',{
        oldPw,
        newPw:newPw1
      }).then(data=>{
        if(!data.code){
          this.$message.success('密码修改成功')
        }
      })
    }
  },
};
</script>
<style lang="sass" scoped>
header
  display: flex
  justify-content: space-between
  align-items: center
  padding: 0 20px
  color: #fff
  h1
    font-size: 18px
    background: url(~@/assets/img/logo.png) no-repeat center left
    background-size: 18px
    padding-left: 25px
  .menu-link
    color: #fff
.dialog-content
  .el-input
    margin-bottom: 15px
</style>
